<template name="image-list">
	<view class="img-list">
		<view class="img-container">
			<block v-for="(item, index) in (imgList)">
				<!-- <view class="img-list-item-wrap"> -->
				<image class="img-list-item" mode="aspectFill" :style="{width: imageWith, 'height': imageWith, visibility: item.isPlaceHolder? 'hidden': 'visible'}"
				 :src="item.path" @tap.stop.prevent="viewDetail(item.id, index)" @longpress.stop.prevent="throwEvent(item.id, index)"></image>
				<!-- </view> -->
			</block>
		</view>
		<image-swiper v-show="showImgSwiper" class="img-list-detail" :starBtn="true" :index="swiperCurIndex" :imageArray="imgDetailList"
		 @ontapcancel="hideDetail">
		</image-swiper>
	</view>
</template>

<script>
	import utils from '../common/function.js'
	import ImageSwiper from './image-swiper.vue'
	export default {
		name: "image-list",
		components: {
			ImageSwiper
		},
		props: {
			imgIds: {
				type: Array,
				default: [],
			},
			numPerRow: {
				type: Number,
				default: 3,
			},
			showDetail: {
				type: Boolean,
				default: false,
			},
			detailIndex: {
				type: Number,
				default: 0,
			},
			addBtn: {
				type: Boolean,
				default: false,
			},
			addMaxCount: {
				type: Number,
				default: 6,
			},
		},
		data() {
			return {
				showImgSwiper: this.showDetail,
				swiperCurIndex: this.detailIndex,
				curImageCount: this.imgIds.length,
			};
		},
		watch: {
			detailIndex: function(value){
				this.swiperCurIndex = value
			},
			showDetail: function(value) {
				// console.log(value, this.showImgSwiper)
				this.showImgSwiper = true
			},
			imgIds: function(value){
				if(value.length>this.curImageCount && this.showDetail){
					this.showImgSwiper = true
				}
				this.curImageCount = value.length
			}
		},
		computed: {
			imageWith: function() {
				let w = parseInt(92 / this.numPerRow)
				return w + 'vw'
			},
			imgList: function() {
				let imgs = this.imgDetailList.slice()
				if (this.addBtn && this.imgDetailList.length < this.addMaxCount) {
					imgs.push({
						id: 'add-new-image',
						path: '/static/add.png',
					})
				}
				let a = imgs.length % this.numPerRow
				let numberOfPlaceHolder2Add = (a == 0 ? 0 : this.numPerRow - a)
				for (let i = 0; i < numberOfPlaceHolder2Add; i++) {
					imgs.push({
						id: 'place-holder',
						path: '/static/add.png',
						isPlaceHolder: true,
					})
				}
				return imgs
			},
			imgDetailList: function() {
				return this.imgIds.map(utils.genImgFromId)
			},
		},

		methods: {
			viewDetail: function(imgId, index) {
				// console.log('view detail', imgId, index)
				if (imgId == 'add-new-image') {
					this.$emit('tapadd')
				} else {
					this.showImgSwiper = true
					this.swiperCurIndex = index
				}
			},
			throwEvent: function(imgId, index) {
				// console.log('del', imgId, index)
				if (imgId == 'add-new-image') return
				this.$emit('imglongpress', {
					imgId: imgId,
					index: index
				})
			},
			hideDetail: function() {
				this.showImgSwiper = false
			}
		}
	}
</script>

<style>
	.img-list {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
	}

	.img-container {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-items: center;
		align-items: center;
		justify-content: space-around;
		align-content: flex-start;
	}

	.img-list-item {
		border: none;
		border-radius: 3px;
		margin-bottom: 5px;
	}

	.img-list-detail {
		z-index: 9;
	}
</style>
